<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--<meta http-equiv="Cache-Control" content="max-age=0" />-->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>首页</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css?v=6.0" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826316_d4byksdq2yi.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826348_zrxvt68zy3g.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826316_gpxib1ulztp.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826316_9cplkf3riek.css" />
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>
	<body>
		<div class="container" id="vue-container">
			<!--头部-->
			<div class="top">
				<!--搜索框-->
				<div class="top_header">
					<a href="suosou.html" class="top_a">
						<div class="header">
							<div class="hed"><img src="img/search-icon.png"><div>点击搜索</div></div>
						</div>
					</a>
					<div class="header_2">
						<a href="lishi.html"><img src="img/history.png"></a>
					</div>
				</div>
				<!--分类-->
				<div class="classify">
					<div><a href="classify.html?id=12&category=都市">都市</a></div>
					<div><a href="classify.html?id=1&category=古言">古言</a></div>
					<div><a href="classify.html?id=18&category=玄幻">玄幻</a></div>
					<div><a href="classify.html?id=10&category=武侠">武侠</a></div>
					<div><a href="classify.html?id=22&category=恐怖灵异">灵异</a></div>
					<div><a href="classify.html?id=13&category=军事">军事</a></div>
					<div><a href="search.html">...</a></div>
				</div>
				<!--轮播图-->
				<div class="lunbo">
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="5"></li>
					  </ol>
					  <div class="carousel-inner" role="listbox">
					  	<!--轮播图片-->
					  </div>
					   <a class="left carousel-control hide" href="#carousel-example-generic" role="button" data-slide="prev">
				            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				            <span class="sr-only">Previous</span>
				        </a>
				        <a class="right carousel-control hide" href="#carousel-example-generic" role="button" data-slide="next">
				            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				            <span class="sr-only">Next</span>
        				</a>
					</div>
				</div>
				<!--选项-->
				<div class="top_bottom">
					<div><a href="search.html"><img src="img/cate.png"><p>分类</p></a></div>
					<div><a href="classify.html?ord=id&category=重榜排行"><img src="img/rank.png"><p>排行</p></a></div>
					<div><a href="classify.html?ord=id&category=新书上架"><img src="img/new.png"><p>新书</p></a></div>
					<div><a href="/user/pay"><img src="img/amont.png"><p>充值</p></a></div>
				</div>
			</div>
			<!--中间内容-->
			<div class="center">
				<!--主编力荐-->
				<div class="head">
					<div class="title">
						<span>主编力荐</span>
						<span><a href='classify.html?ord=admin_rec&category=主编力荐'>查看更多></a></span>
					</div>
					<div class="zoubang_content content">
						<div v-for="book5 in books5">
							<a :href="'book_details.html?id=' + book5.ID">
								<img v-lazy="init_image(book5.Image)">
							</a>
							<p>{{book5.Title}}</p>
						</div>
					</div>
				</div>
				<!--每日必看-->
				<div class="head">
					<!--标题-->
					<div class="title">
						<span>每日必看</span>
						<span><a href='classify.html?ord=day_rec&category=每日必看'>查看更多></a></span>
					</div>
					<!--书籍-->
					<div class="demo">
						<div class="below meiribikan">
							<div v-for="book4 in books4" class="meiri-img">
								<a :href="'book_details.html?id=' + book4.ID">
									<!--<img :src="book4.Image?init_image(book4.Image):''">-->
									<img v-lazy="init_image(book4.Image)">
								</a>
								<p>{{book4.Title}}</p>
							</div>
						</div>
					</div>
					<!--<div class="huan" @click="next_serach">换一批<img src="img/change.png"></div>-->
				</div>
				<!--男生精选-->
				<div class="head">
					<div class="title">
						<span>男生精选</span>
						<span><a href='classify.html?ord=user_rec&sex=1&category=男生精选'>查看更多></a></span>
					</div>
					<div class="changxiao_content content">
						<div v-for="book7 in books7">
							<a :href="'book_details.html?id=' + book7.ID">
								<img v-lazy="init_image(book7.Image)">
							</a>
							<p>{{book7.Title}}</p>
						</div>
					</div>
				</div>
				<!--女生精选-->
				<div class="head">
					<div class="title">
						<span>女生精选</span>
						<span><a href='classify.html?ord=user_rec&sex=2&category=女生精选'>查看更多></a></span>
					</div>
					<div class="content"><!--newbook_content--> 
						<div v-for="book6 in books6">
							<a :href="'book_details.html?id=' + book6.ID">
								<img v-lazy="init_image(book6.Image)">
							</a>
							<p>{{book6.Title}}</p>
						</div>
					</div>
				</div>
				<!--分类都市-->
				<div class="head">
					<!--标题-->
					<div class="title">
						<span>都市生活</span>
						<span><a href='classify.html?id=12&category=都市生活'>查看更多></a></span>
					</div>
					<!--书籍-->
					<div class="intro" v-for="book in books">
						<a :href="'book_details.html?id=' + book.ID">
							<div class="intro_tu">
								<img v-lazy="init_image(book.Image)">
							</div>
							<div class="intro_right">
								<p class="intro_title">{{book.Title}}</p>
								<p class="intro_intro">{{book.Description}}</p>
								<span class="intro_fenlei">{{get_tag_name(book.TagID)}}</span>
							</div>
						</a>
					</div>
				</div>
				<!--分类乡野-->
				<div class="head"> 
					<div class="title">
						<span>奇幻玄幻</span>
						<span><a href='classify.html?id=18&category=奇幻玄幻'>查看更多></a></span>
					</div>
					<div class="intro" v-for="book2 in books2">
						<a :href="'book_details.html?id=' + book2.ID">
							<div class="intro_tu">
								<img v-lazy="init_image(book2.Image)">
							</div>
							<div class="intro_right">
								<p class="intro_title">{{book2.Title}}</p>
								<p class="intro_intro">{{book2.Description}}</p>
								<span class="intro_fenlei">{{get_tag_name(book2.TagID)}}</span>
							</div>
						</a>
					</div>
				</div>
				<!--分类玄幻-->
				<div class="head">
					<div class="title">
						<span>校园言情</span>
						<span><a href='classify.html?id=3&category=校园言情'>查看更多></a></span>
					</div>
					<div class="intro" v-for="book3 in books3">
						<a :href="'book_details.html?id=' + book3.ID">
							<div class="intro_tu">
								<img v-lazy="init_image(book3.Image)">
							</div>
							<div class="intro_right">
								<p class="intro_title">{{book3.Title}}</p>
								<p class="intro_intro">{{book3.Description}}</p>
								<span class="intro_fenlei">{{get_tag_name(book3.TagID)}}</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!--底部-->
			<div class="bottom">
				<!--其他分类-->
				<div class="bottom_tu">
					<div class="bottom_tu2"><a href='classify.html?id=12&category=都市佣兵'><img v-lazy="'img/mercenary@2x.png'"></a></div>
					<div class="bottom_tu2"><a href='classify.html?id=19&category=悬疑灵异'><img v-lazy="'img/suspense@2x.png'"></a></div>
				</div>
				<div class="bottom_tu bottom_tu4">
					<div class="bottom_tu2"><a href='classify.html?id=6&category=婚恋言情'><img v-lazy="'img/romance@2x.png'"></a></div>
					<div class="bottom_tu2 bottom_tu3"><a href='classify.html?id=2&category=豪门世家'><img v-lazy="'img/sarcar@2x.png'"></a></div>
				</div>
				<!--添加公众号-->
				<div class="bottom_zi">
					<p class="zi">长按3秒快速关注公众号</p>
					<div class="bottom_img"></div>
					<p class="zi">千万小说精品送给您，天天领福利</p>
				</div>
			</div>
			<div class="footer">
				
				<div class="index">
					<a href="index.html?love2">
						<i class="iconfont icon-shouye1" style="color: #3688FF;"></i>
						<p>首页</p>
					</a>
				</div>
				<div class="fen">
					<a href="/user/pay">
						<i class="iconfont icon-chongzhi"></i>
						<p>充值</p>
					</a>
				</div>
				<div class="shujia">
					<a href="lishi.html?love2">
						<i class="iconfont icon-shujiguanli"></i>
						<p>书架</p>
					</a>
				</div>
				<div class="yonghu">
					<a href="vip.html?love2">
						<i class="iconfont icon-yonghu"></i>
						<p>我的</p>
					</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<script type="text/javascript" src="js/fingers_sliding.js" ></script>
	<script type="text/javascript" src="js/getUrlParam.js" ></script>
	<script type="text/javascript" src="js/vue.min.js" ></script>
	<script type="text/javascript" src="js/vue-lazyload.js" ></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
		$(function() {
			var startx,starty
			var menu = function(wrap, menuList, menuItems) {
				var deviceWidth = $(window).width();
				var positionX = 0;
				var menuListPositionX1 = wrap.offset().left; 
				var menuListPositionX2 = menuListPositionX1 + wrap.width();  
				
				$(menuList).attr("style","transition-duration: 0ms;transform: translateX(0px);");
		 		
				menuList.addEventListener('touchstart',function(event){
					if(event.targetTouches.length == 1){
				        var touch = event.targetTouches[0];
				        startx = event.touches[0].pageX;
						starty = event.touches[0].pageY;
				        positionX = touch.pageX;
				        //确定本次拖动transform的初始值
				        var transformStr = menuList.style.transform;
				        transformStr = transformStr.substring(11);
				        var index = transformStr.lastIndexOf("p");
				        transformStr = transformStr.substring(0, index);
				        transformX = parseInt(transformStr);
				        //确定本次拖动的div宽度值
				        var widthStr = menuList.style.width;
				        thisWidth = parseInt(widthStr.substring(0,widthStr.lastIndexOf("p")));
				    }
				}, false);
				menuList.addEventListener('touchmove', function(event) {
				    //阻止其他事件
//				    event.preventDefault();
				    //获取当前坐标
				    var endx, endy;
					endx = event.changedTouches[0].pageX;
					endy = event.changedTouches[0].pageY;
					var direction = getDirection(startx, starty, endx, endy);
					if(direction==3||direction==4){
				    if(event.targetTouches.length == 1){
				        var touch = event.targetTouches[0];
				        menuList.style.transform = 'translateX('+(transformX+touch.pageX-positionX)+'px)';
				        $(menuList).css("width",thisWidth+positionX-touch.pageX);
				    }
				   }
				}, false);
				menuList.addEventListener('touchend', function(event) {
					var trans=$(menuList).css("transform")
				    var transformX=parseFloat(trans.substring(7).split(',')[4])
				    var abs=Math.abs(transformX)
//				    console.log(abs)
//				    console.log($(".meiri-img").width())
				    var menuListWidth=Number($(".meiri-img").width()*19-20);
//				    console.log(menuListWidth)
				    if(abs>menuListWidth){
				    	$(menuList).css("transform","translateX("+(0-menuListWidth)+"px)");
				    }
				    if(transformX>0){
				    	$(menuList).css("transform","translateX(0px)");
				    }
				}, false);
			}
			var init = function() {
				var menuWrap = $('.demo');
				var menuList = $(".below")[0];
				var menuListItems = $(".meiri-img");
				menu(menuWrap, menuList, menuListItems);
			}();
		});
		function getAngle(angx, angy) {
			return Math.atan2(angy, angx) * 180 / Math.PI;
			};
			function getDirection(startx, starty, endx, endy) {
				var angx = endx - startx;
				var angy = endy - starty;
				var result = 0;
				//如果滑动距离太短
				if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
				return result;
				}
				var angle = getAngle(angx, angy);
				if (angle >= -135 && angle <= -45) {
				result = 1;
				} else if (angle > 45 && angle < 135) {
				result = 2;
				} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
				result = 3;
				} else if (angle >= -45 && angle <= 45) {
				result = 4;
				}
				return result;
				}
	</script>
	<script>
//		var host = "http://" + location.host;
		$(window).scroll(function() {
				if($(document).scrollTop() >= $(".header").height()) {
					$(".top_a").addClass("header2");
				}
				if($(document).scrollTop()<$(".header").height()){
					$(".top_a").removeClass("header2")
				}
			}
		)
		//二维码图片
		$.ajax({
			type: "get",
			url: host + "/wechat/qrcode",
			datatype: "json",
			success: function(data) {
					var qrcode = data.qrcode;
					$(".bottom_img").html("<img src="+host+"/"+qrcode+" class='center-block'>");
			}
		})
		//轮播
		$.ajax({
			type:"get",
			url:host+"/sliders?Show=1&Limit=6&Offset=0",
			datatype:"json",
			success:function(data){
				if(!!data.list){
					var div="";
					var li="";
					for (var i=0,ln=data.list.length;i<ln;i++) {
						var id=data.list[i].BookID;
						var Image=data.list[i].Image;
						li+='<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>';
						div+='<div class="item"><a href="book_details.html?id='+id+'"><img src="'+host+'/'+Image+'"></a></div>';
						$(".carousel-inner").html(div);
						$(".carousel-indicators").html(li);
					}
					$(".carousel-inner div").eq(0).addClass("active");
					$(".carousel-indicators li").eq(0).addClass("active")
//					var hd='<a href="/user/pay?money=5000"><img src="img/20181110154943.jpg"></a>'
//					$(".carousel-inner div:nth-child(1)").html(hd)
				}
				
			}
		})
		Vue.use(VueLazyload);
		//都市
		new Vue({
				el: "#vue-container",
				data: {
					search: {
						offset:0,
						tag_id: 0, // 标签 ID 
					},
					tags: [], // 所有的分类列表
					books: [], // 都市
					books2: [],//玄幻
					books3: [],//幻想言情
					books4: [],//每日必看
					books5: [],//主编力荐
					books6: [],//女生精选
					books7: [],//男生精选
				},
				created: function() {
					let self = this;
					$.get(host + "/book-tags", function(data) {
						if(!!data.list) {
							self.tags = data.list;
						}
					})
					this.start_search();// 都市
					this.start2_search();//玄幻
					this.start3_search();//幻想言情
					this.start4_search();//每日必看
					this.start5_search();//主编力荐
					this.start6_search();//女生精选
					this.start7_search();//男生精选
				},
				methods: {
					// 都市
					start_search: function() {
						let self = this;
						this.books;
						let url = host + "/books?Order=id%20desc&TagID=12&Limit=3&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books = data.list;
							}
						})
					},
					//玄幻
					start2_search: function() {
						let self = this;
						this.books2;
						let url = host + "/books?Order=id%20desc&TagID=18&Limit=3&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books2 = data.list;
							}
						})
					},
					//校园言情
					start3_search: function() {
						let self = this;
						this.books3;
						let url = host + "/books?Order=id%20desc&TagID=3&Limit=3&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books3 = data.list;
							}
						})
					},
					//每日必看
					start4_search: function() {
						let self = this;
						this.books4;
						let url = host + "/books?Order=day_rec%20desc&Limit=20&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books4 = data.list;
							}
						})
					},
					//主编力荐
					start5_search: function() {
						let self = this;
						this.books5;
						let url = host + "/books?Order=admin_rec%20desc&Limit=6&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books5 = data.list;
							}
						})
					},
					//女生精选
					start6_search: function() {
						let self = this;
						this.books6;
						let url = host + "/books?Order=user_rec%20desc&Sex=2&Limit=3&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books6 = data.list;
							}
						})
					},
					//男生精选
					start7_search: function() {
						let self = this;
						this.books7;
						let url = host + "/books?Order=user_rec%20desc&Sex=1&Limit=6&Offset=0";
						$.get(url, function(data) {
							if(!!data.list) {
									self.books7 = data.list;
							}
						})
					},
					init_image: function(url) {
						return host + "/" + url
					},
					get_tag_name: function(tag_id) {
						for(let i = 0, ln = this.tags.length; i < ln; i++) {
							let tag = this.tags[i];
							if(tag.ID === tag_id) {
								return tag.Name
							}
						}
					},
					next_serach: function() {
						this.search.offset += 3;
						if(this.search.offset>=30){
							this.search.offset=0
						}
						this.start4_search();
					}
				}
		})
		$('.carousel').carousel({
		  interval: 2000
		})
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?055cff4356b44984f650fdfa60a0cee6";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
</html>
